<template>
  <div>
      <el-form :model="info">
            <div class="line-Body">
            <div class="line-left">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                <el-input v-model="info.name" auto-complete="off"></el-input>
                </el-form-item>
            </div>
            <div class="line-mid"></div>
            <div class="line-right">
                <el-form-item label="菜单" :label-width="formLabelWidth">
                <el-select v-model="info.menu_id" filterable placeholder="请选择角色首页" style="width:100%;">
                    <el-option v-for="item in menuList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                </el-form-item>
            </div>
            </div>
            <div class="line-Body">
            <div class="line-all">
                <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="info.note" auto-complete="off"></el-input>
                </el-form-item>
            </div>
            </div>
        </el-form>
  </div>
</template>
<script>
export default {
  name: "RoleInfo",
  props: ["info", "menuList"],
  data: function() {
    return {
      formLabelWidth: "70px"
    };
  },
  mounted: function() {
    console.log(this.info);
  },
  watch: {
    info: function(newValue, oldValue) {
      if (this.info.menu_id) {
        for (let index = 0; index < this.menuList.length; index++) {
          const element = this.menuList[index];
          if (this.info.menu_id == element.id) {
            this.info.url = element.url;
          }
        }
      }
    }
  },
  methods: {}
};
</script>
